<template>
    <div class="page">
      <div class="form-container detail-noTab-container">
        <div class="btns">
          <slot name="back" />
        </div>
        <el-scrollbar ref="scrollbar" style="flex: 1">
          <div class="view-container" v-loading="loading">
            <div class="info-container">
              <div class="content">
                <div class="info-title">请求参数</div>
                <el-descriptions
                  :column="2"
                  border
                  :colon="true"
                  label-class-name="custom-description-label-160"
                >
                  <el-descriptions-item>
                    <template #label>老人姓名</template>
                    {{ state.formData.name }}
                  </el-descriptions-item>
  
                  <el-descriptions-item>
                    <template #label>证件类型</template>
                    {{ formatDictCode('C0015', state.formData.cardTypeCode) }}
                  </el-descriptions-item>
  
                  <el-descriptions-item>
                    <template #label>证件号码</template>
                    {{ state.formData.idCard }}
                  </el-descriptions-item>
  
                  <el-descriptions-item>
                    <template #label>性别</template>
                    {{ formatDictCode('C0007', state.formData.sexCode) }}
                  </el-descriptions-item>
  
                  <el-descriptions-item>
                    <template #label>年龄</template>
                    {{ state.formData.age }}
                  </el-descriptions-item>
  
                  <el-descriptions-item>
                    <template #label>民族</template>
                    {{ formatDictCode('C0009', state.formData.nationCode) }}
                  </el-descriptions-item>
  
                  <el-descriptions-item>
                    <template #label>联系电话</template>
                    {{ state.formData.phone }}
                  </el-descriptions-item>
  
                  <el-descriptions-item>
                    <template #label>现居住所在区划</template>
                    {{ state.formData.currentAreaName }}
                  </el-descriptions-item>
  
                  <el-descriptions-item>
                    <template #label>详细地址</template>
                    {{ state.formData.address }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <div class="btn-group">
          <el-button
            class="btn-form-close"
            type="primary"
            @click="changeComponents('list')"
          >
            关闭
          </el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { formatDictCode } from '@/utils/format.js'
  import { calAgeAndSexByIdCard } from '@/utils/index.js'
  import { useUserStore } from '@/pinia/modules/user'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { renderAreaCode, renderAreaArr } from '@/utils/index.js'
  import {
    ref,
    reactive,
    toRefs,
    onMounted,
    nextTick,
    inject,
    markRaw,
    defineAsyncComponent,
    onBeforeMount
  } from 'vue'
  import {
    Delete,
    Edit,
    Search,
    Share,
    Upload,
    Plus
  } from '@element-plus/icons-vue'
  import { appCurrentState } from '@/pinia/modules/app.js'
  
  const currentState = appCurrentState()
  const userStore = useUserStore()
  const userAreaArr = ref(userStore.userAreaArr)
  const orgInfo = userStore.orgInfo
  const elScrollTop = ref(0)
  const loading = ref(false)
  const scrollbar = ref()
  
  const changeComponents = inject('changeComponents')
  
  const state = reactive({
    formData: {
    }
  })
  
  onMounted(() => {
    handleScroll()
    // 获取详情
    if (currentState.getCurrentDetailInfo) {
     state.formData = JSON.parse(currentState.getCurrentDetailInfo)
    }
  })
  
  const cancel = () => {
    changeComponents('list')
  }
  
  const handleScroll = () => {
    const scrollbarEl = scrollbar.value.wrap$
    scrollbarEl.onscroll = () => {
      elScrollTop.value = scrollbarEl.scrollTop
    }
  }
  
  const scrollTo = height => {
    nextTick(() => {
      scrollbar.value.wrap$.scrollTop = height
    })
  }
  
  </script>
  
  <style lang="scss" scoped>
  .form-container {
    padding: 10px;
    // height: 100%;
    // position: relative;
    // width: unset !important;
    display: flex;
    background-color: #fff;
    .tab-header {
      position: absolute;
      top: 20px;
      right: 20px;
  
      div {
        width: 180px;
        display: flex;
        justify-content: space-between;
      }
    }
    .tab-content {
      width: 200px;
      padding: 15px;
      display: flex;
      flex-direction: column;
      .tab-item {
        height: 40px;
        line-height: 40px;
        font-size: 13px;
        text-align: center;
        border: 1px solid#DCDFE6;
        cursor: pointer;
        & + .tab-item {
          border-top: none;
        }
        &.active {
          color: #fff;
          background: #409eff;
          border-color: #409eff;
        }
      }
    }
    .btns {
      position: fixed;
      top: 120px;
      right: 25px;
      z-index: 100;
    }
  
    .view-container {
      margin: 0 30px;
      padding-bottom: 30px;
    }
    .info-container {
      margin: 20px auto;
      .content {
        width: 100%;
        margin-right: 20px;
      }
      .pic-content {
        width: 100%;
      }
      .info-title {
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 13px;
        color: #606266;
        position: relative;
        left: 10px;
        &::before {
          content: '';
          position: absolute;
          width: 5px;
          height: 18px;
          background-color: #126cff;
          left: -10px;
          top: -2px;
        }
      }
    }
    .el-form-item {
      margin-bottom: 0px !important;
      // &.is-error {
      // 	top: -6px;
      // 	position: relative;
      // }
    }
    .btn-group {
      margin: 20px;
      padding-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .input-content {
    display: flex;
    flex-wrap: wrap;
  
    .input-item {
      display: flex;
      align-items: center;
      margin: 15px 30px 15px 0;
      font-size: 13px;
    }
  }
  
  .table-container {
    height: 300px;
  }
  
  .add-btn {
    margin: 15px 0;
  }
  </style>
  